import React, { useState, useEffect } from 'react';
import { Time } from 'base/ctl/base';
import { Title } from 'base/ctl/title';
import { useTimer, Wait, uPlc, uDb, cline, is_empty, RgbBt, NuiBt, useHigh } from 'sui';
import { loc } from 'local/index.js';
import { get_rgb } from '../pick/cmd';
import { g_db, g_wsn } from 'db/state';
import { get_gun, clear_gun } from 'base/api';
import { ck_box } from 'step/box';

const reload = (fnDone, setMain) => uDb(fnDone, `field/list/pbox${g_db.usn()}`, { line: cline() },
    r => {
        r.sort();
        setMain(r);
    },
    e => setMain(null));

const PBox = ({ umd, hreturn }) => {
    const [wait, setWait] = useState(false);
    const [main, setMain] = useState();
    const [code, setCode] = useState();
    const [err, setErr] = useState();
    const [high] = useHigh(10, 200)

    const herr = (e) => {
        setErr(e);
        setWait(false);
    };

    const hcode = (v) => {
        const e = ck_box(v);
        if (e) {
            setErr(e);
            return;
        }

        setWait(true);

        const ret = [];

        if (is_empty(main)) {
            ret.push(v);
        } else {
            const f = main.find(d => d === v);
            if (f) {
                herr("此箱号已经存在");
                return;
            }

            main.forEach(d => ret.push(d));
            ret.push(v);
        }

        uDb(null, `field/md/pbox${g_db.usn()}`,
            {
                line: cline(),
                v: ret,
            },
            r => {
                setErr("");
                reload(() => setWait(false), setMain);
            }, e => herr("修改失败"));
    };

    useEffect(() => {
        g_db.stop_scan();
        reload(null, setMain);
    }, []);

    const reducer = (state, action) => {
        uPlc(null, "get",
            {
                line: cline(),
                sn: g_wsn(),
            },
            r => {
                const ret = get_gun(r);
                if (!ret) {
                    return;
                }

                clear_gun();
                setCode(ret);
                hcode(ret);
            });

        return state;
    };

    useTimer(reducer, 700);

    const getItem = () => {
        if (is_empty(main)) {
            return null;
        }

        return main.map(d => {
            const rgb = get_rgb(d);
            return <RgbBt key={d} cl={rgb} className="ml-6 mb-4">{d}</RgbBt>;
        });
    };

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2">
                <Title label={loc("base_43")} value={g_wsn()} width="w-56"/>
                <Title value={umd.get("usn")} sub="用户" width="w-56"/>
                <Title label="箱子编码" value={code} width="w-56"/>
                <Time/>
            </div>
            <div className="flex flex-row items-start mt-1">
                <div className="flex flex-col w-full">
                    <div className="inline-flex justify-between my-4 mr-1">
                        <div className="w-full bg-gray-200 text-3xl flex items-center justify-center h-32 border border-white">
                            <div>用扫码枪扫描<span className="text-red-600">箱子</span>二维码</div>
                        </div>
                        <NuiBt color="green" className="mt-1 ml-4 w-px-next" hcmd={() => {
                            g_db.start_scan();
                            hreturn();
                        }}>
                            <div className="text-2xl">返回</div>
                        </NuiBt>
                    </div>
                    <div style={{ height: `${high - 310}px`, width: "100%" }} className="my-1 border">
                        <div className="flex h-full overflow-y-auto">
                            <div className="flex flex-wrap content-start">
                                {getItem()}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="inline-flex items-center justify-between">
                <div className="w-full mr-2 mt-2 border border-white rounded bg-white justify-between">
                    <div className="ml-2 font-bold text-xl text-red-600 h-12">{err}</div>
                </div>
            </div>
            <Wait wait={wait}/>
        </div>
    );
};

export {PBox};
